<template>
	<div class="container">
		<div class="content">
			<div class="tui-header-center">
				<image :src="userInfo.avatarPath  || '/static/icon/userIcon.png'" class="tui-avatar" mode="aspectFill" @click="$navSkin.toSetInfo()"></image>
				<div class="tui-info" @click="toSetUserInfo()">
					<div class="tui-nickname">
						{{userInfo.nickname}}
						<image v-if="userInfo.sex == 1" src="/static/icons/nan.png" mode=""></image>
						<image v-else src="/static/icons/nv.png" mode=""></image>
					</div>
					<div class="tui-explain">
						<span>关注：{{userInfo.followCount}}</span> <span>粉丝：{{userInfo.fansCount}}</span>
					</div>
				</div>
				<div class="tui-btn-edit">
					<image src="/static/icons/set.png" mode="" @click="$navSkin.toSetting()"></image>
					<image src="/static/icons/icon_tianjia.png" mode="" @click="$navSkin.toSearch()"></image>
				</div>
			</div>
			<div class="topic-header">
				<div class="left">
					<span>{{$utils.monthDate()}}&nbsp;&nbsp;&nbsp;&nbsp;{{$utils.week()}}</span>
				</div>
				<div class="right">
					<div class="userInfo">
						<image class="user-img" :src="userInfo.avatarPath" mode="aspectFill"></image>
						<div class="user-num">{{userInfo.myIndex || '000'}}</div>
					</div>
					<div class="userInfo">
						<image class="user-img" :src="userInfo.lastUpdateAvatar" mode="aspectFill"></image>
						<div class="user-num">{{userInfo.lastUpdateIndex || '000'}}</div>
					</div> 
				</div>
			</div>
			<div class="topic-body">
				<div class="section">
					<div class="title">他/她的圈子</div>
					<div class="tab-section">
						<div class="tab-item" :class="{'active':timeCurrent == item.id}" v-for="(item,index) in timeTab" :key="index" @click="selectTime(item.id)">
							{{item.name}}
						</div>
							
					</div>
					<div class="user-section"  v-if="list.length > 0">
						<div class="section-border"></div>
						<div class="center">
							<image :src="otherUser.avatarPath" mode="aspectFill"></image>
						</div>
						<div class="user-box"  :style="'background:'+item.colorLight" :class="[item.colorLight,'user_'+ (index+1)]" v-for="(item,index) in list" :key="index"  @click="toFollowLabels(item.tagId,item.tagName,item.colorLight)">
							<div class="lab">{{item.tagName}}</div>
							<div class="time">{{item.clickTime}}</div>
						</div>
					</div>
				</div>
			</div>
		
		</div>

	</div>
</template>

<script>
import data from '@/js/my/hisCircle/data.js';
import methods from '@/js/my/hisCircle/methods.js';
import { mapState } from 'vuex';
import uniPopup from "@/components/uni-popup/uni-popup.vue";
export default {
	data,
	methods,
	onLoad(e) {
		this.id = e.id
		this.getPageList(e.id)
		this.getOtherUserInfo(e.id)
	},
	onShow() {
		
	},
	onHide() {},
	computed: {
		...mapState(['navigationBarHeight', 'userInfo']),
		bgHeight() {
			// #ifdef APP-PLUS
			return 200
			// #endif
			return this.navigationBarHeight + uni.upx2px(300);
		}
	},
	components: {
		uniPopup
	}
};
</script>

<style scoped lang="scss">
@import '~@/style/my/hisCircle.scss';
</style>
